<template>
  <view class="rf-search">
    <view class="search-box">
      <mSearch class="mSearch-input-box" :mode="2" button="inside"
               :placeholder="hotSearchDefault || '请输入关键字'"
               @search="doSearch(false)" @confirm="doSearch(false)"
               v-model="keyword"></mSearch>
    </view>
    <view class="search-keyword" @touchstart="blur">
      <scroll-view class="keyword-list-box" v-if="isShowKeywordList" scroll-y>
        <view class="keyword-entry" hover-class="keyword-entry-tap" v-for="row in keywordList" :key="row.keyword">
          <view class="keyword-text" @tap="doSearch(row.keyword)">
            <rich-text :nodes="row.htmlStr"></rich-text>
          </view>
          <view class="keyword-img" @tap="setkeyword(row)">
          </view>
        </view>
      </scroll-view>
      <scroll-view class="keyword-box" v-if="!isShowKeywordList" scroll-y>
        <view class="keyword-block">
          <view class="keyword-list-header">
            <view>历史搜索</view>
            <view>
              <text class="iconfont icon-shanchu1" @tap="oldDelete"></text>
            </view>
          </view>
          <view class="keyword">
            <view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword)" :key="index">{{keyword}}</view>
          </view>
          <view class="hide-hot-tis" v-if="oldKeywordList.length === 0">
            <view>暂无记录</view>
          </view>
        </view>
        <view class="keyword-block" v-if="hotKeywordList">
          <view class="keyword-list-header">
            <view>热门搜索</view>
            <view>
              <text class="iconfont" :class="forbid" @tap="hotToggle"></text>
            </view>
          </view>
          <view class="keyword">
            <view v-for="(keyword,index) in hotKeywordList" @tap="doSearch(keyword.name)" :key="index">{{keyword.name}}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
	import mSearch from '@/components/rf-search';
	export default {
		data() {
			return {
				keyword: '',
				oldKeywordList: [],
				hotKeywordList: [],
				keywordList: [],
				forbid: 'iconai47',
				isShowKeywordList: false,
        hotSearchDefault: '',
				type: null  // 搜索类型
			}
		},
		onLoad(options) {
			this.initData(options);
		},
		components: {
			mSearch
		},
		methods: {
			async initData(options) {
				this.type = options.type;
				let that = this
				this.$api.getUrl(this.$api._api.ApiIndexHotSearch, {}, function(res){
					that.hotKeywordList = res;
					that.hotSearchDefault = res[0].name || options.keyword;
				})
				const search = JSON.parse(options.data || '{}');
				this.loadOldKeyword();
		   },
			blur() {
				uni.hideKeyboard()
			},
			//加载历史搜索,自动读取本地Storage
			loadOldKeyword() {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						let OldKeys = JSON.parse(res.data);
						this.oldKeywordList = OldKeys;
					}
				});
			},
			//顶置关键字
			setkeyword(data) {
				this.keyword = data.keyword;
			},
			//清除历史搜索
			oldDelete() {
				uni.showModal({
					content: '确定清除历史搜索记录？',
					success: (res) => {
						if (res.confirm) {
							this.oldKeywordList = [];
							uni.removeStorage({
								key: 'OldKeys'
							});
						} else if (res.cancel) {
						}
					}
				});
			},
			//热门搜索开关
			hotToggle() {
				this.forbid = this.forbid === 'iconai47' ? 'iconyanjing' : 'iconai47';
			},
			//执行搜索
			doSearch(key) {
				key = key ? key : this.keyword ? this.keyword : this.defaultKeyword;
				if(!key || typeof(key) == 'undefined'){
					uni.showToast({
						title:'请输入搜索关键字',
						icon:'none'
					})
					return false
				}
				this.keyword = key;
				this.saveKeyword(key); //保存为历史
				if (this.type === 'order') {
					uni.navigateTo({
						url: `/pagesA/search/search?keyword=${key}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/category/product/list?keyword=${key}`
					})
				}
			},
			//保存关键字到历史记录
			saveKeyword(keyword) {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						let OldKeys = JSON.parse(res.data);
						let findIndex = OldKeys.indexOf(keyword);
						if (findIndex === -1) {
							OldKeys.unshift(keyword);
						} else {
							OldKeys.splice(findIndex, 1);
							OldKeys.unshift(keyword);
						}
						//最多10个纪录
						OldKeys.length > 10 && OldKeys.pop();
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					},
					fail: () => {
						let OldKeys = [keyword];
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					}
				});
			}
		}
	}
</script>
<style lang="scss">
  .rf-search {
    .search-box {
      width: 100%;
      background-color: rgb(242, 242, 242);
      padding: 15rpx 2.5%;
      display: flex;
      justify-content: space-between;

      .mSearch-input-box {
        width: 100%;
      }

      .input-box > input {
        width: 100%;
        height: 60rpx;
        font-size: 32rpx;
        border: 0;
        border-radius: 60rpx;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 0 3%;
        margin: 0;
        background-color: #ffffff;
      }
    }

    .search-keyword {
      width: 100%;
      background-color: rgb(242, 242, 242);

      .keyword-list-box {
        height: calc(100vh - 110rpx);
        padding-top: 10rpx;
        border-radius: 20rpx 20rpx 0 0;
        background-color: #fff;
      }

      .keyword-entry {
        width: 94%;
        height: 80rpx;
        margin: 0 3%;
        font-size: 30rpx;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 1rpx #e7e7e7;

        image {
          width: 60rpx;
          height: 60rpx;
        }

        .keyword-text {
          width: 90%;
        }

        .keyword-img {
          width: 10%;
          justify-content: center;
        }
      }

      .keyword-box {
        border-radius: 20rpx 20rpx 0 0;
        background-color: #fff;

        .keyword-block {
          padding: 10rpx 0;

          .keyword-list-header {
            width: 100vw;
            padding: 10rpx 3%;
            font-size: 27rpx;
            color: #333;
            display: flex;
            justify-content: space-between;

            image {
              width: 40rpx;
              height: 40rpx;
            }
          }

          .keyword {
            width: 100vw;
            padding: 3px 3%;
            display: flex;
            flex-flow: wrap;
            justify-content: flex-start;
          }

          .hide-hot-tis {
            display: flex;
            justify-content: center;
            font-size: 28rpx;
            color: #6b6b6b;
          }

          .keyword > view {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 60rpx;
            padding: 0 20rpx;
            margin: 10rpx 20rpx 10rpx 0;
            height: 60rpx;
            font-size: 28rpx;
            background-color: rgb(242, 242, 242);
            color: #6b6b6b;
          }
        }
      }
    }

    .iconfont {
      font-size: $font-lg + 12rpx;
    }
  }
</style>
